<script setup>
import MovieCard from "../MovieDetail/MovieCard/MovieCard.vue";
import {
  getList,
  getCinemaListByMovieId,
  getCinemaListDisCount,
} from "./api/index";
import { onBeforeMount, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import CinemaList from "./CinemaList/CinemaList.vue";
let cinemaList = ref(null);
let movieId = ref(null);
let movie = ref(null);
const route = useRoute();
const getCinemaList = async () => {
  const data = await getList();
  cinemaList.value = data;
};
const getDisCount = async () => {
  const data = await getCinemaListDisCount(movieId.value);
  cinemaList.value = data;
};
const getMovie = async () => {
  movie.value = await getCinemaListByMovieId(movieId.value);
  getDisCount();
};
onBeforeMount(() => {
  if (route.params.id) {
    movieId.value = route.params.id;
    getMovie();
  } else {
    getCinemaList();
  }
});
</script>

<template>
    <MovieCard v-if="movie" :movie="movie" />
  <div class="message clearfix">
    <div class="type clearfix none">
      <div class="left">品牌：</div>
      <div class="right">
        <ul>
          <li><a href="">全部</a></li>
          <li><a href="">大地影院</a></li>
          <li><a href="">万达影城</a></li>
          <li><a href="">恒大影城</a></li>
          <li><a href="">其他</a></li>
        </ul>
      </div>
    </div>
    <div class="type clearfix">
      <div class="left">行政区：</div>
      <div class="right">
        <ul>
          <li><a href="">全部</a></li>
          <li><a href="">地铁附近</a></li>
          <li><a href="">海城区</a></li>
          <li><a href="">合浦区</a></li>
          <li><a href="">银海区</a></li>
          <li><a href="">铁山港区</a></li>
        </ul>
      </div>
    </div>
    <div class="type clearfix">
      <div class="left">特殊厅：</div>
      <div class="right">
        <ul>
          <li><a href="">全部</a></li>
          <li><a href="">IMAX厅</a></li>
          <li><a href="">杜比全景声厅</a></li>
          <li><a href="">儿童厅</a></li>
        </ul>
      </div>
    </div>
    <div class="type clearfix" style="border: none">
      <div class="left">服务：</div>
      <div class="right">
        <ul>
          <li><a href="">全部</a></li>
          <li><a href="">可退票</a></li>
          <li><a href="">可改签</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="title common clearfix">
    <div>
      <h2>影视列表</h2>
    </div>
    <div class="img">
      <img
        src="http://p1.meituan.net/scarlett/af58aa7b387e1c4d26797f027733ace2309.png"
        alt=""
      />
      筛选
    </div>
  </div>
  <CinemaList :cinemaList="cinemaList" :movie="movie"/>
</template>

<style scoped>
/* 信息导航 */
.message {
  width: 1300px;
  margin: 80px auto;
  border: 1px solid #ccc;
}
.message .type {
  margin: 15px 14px;
  font-size: 15px;
  line-height: 30px;
  border-bottom: 1px dashed #ccc;
}
.message .type .none {
  border-bottom: none;
}

.message .type .left {
  float: left;
  color: #999;
}
.message .type .right {
  float: left;
  width: 900px;
}
.message .type .right li {
  float: left;
  margin: 0 9px;
  padding: 0 6px;
}
.message .type .right li:hover {
  color: #fff;
  background: #ff4400;
  border-radius: 10px;
}
/* 信息导航结束 */

/* 信息区域 */

.title {
  border-left: 5px solid #f40;
  padding-left: 6px;
  font-size: 18px;
  margin-bottom: 30px;
  width: 1300px;
  height: 52px;
  margin: 0 auto;
  line-height: 100%;
}
.title div h2 {
  float: left;
}
.title .img {
  float: right;
}

/* 信息区域结束*/
</style>